<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div id="app">
    <joys-header></joys-header>
    <keep-alive>
      <!-- //exclude="Detail" -->
      <router-view :class="{ Filter: isFilter }"></router-view>
    </keep-alive>
    <joys-tab></joys-tab>

    <div v-if="upDateBox" class="cache_popout" ref="cachePopout">
      <div class="cache_popout_info">
        <span>发现新版本</span>
        <p>&nbsp;</p>
        <p>{{ upDateTitle }}</p>
        <div class="btn">
          <i class="unable" v-if="upDataInstallStyle == ''">请稍等</i>
          <i v-else-if="upDataInstallStyle == 'install'" @click="updateStart"
            >确定</i
          >
          <i v-else-if="upDataInstallStyle == 'Ok'" @click="updateOk">确定</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import JoysHeader from "@/pages/mobile/components/JoysHeader/JoysHeader";
import JoysTab from "@/pages/mobile/components/JoysTab/JoysTab";
export default {
  name: "App",
  components: {
    // 组件
    JoysHeader,
    JoysTab
  },
  data () {
    return {
      upDateBox: false,
      isFilter: false,
      upDateTitle: "正在下载 ...",
      upDataInstallStyle: ""
    };
  },
  mounted () {
    this.appUpDate();
  },
  methods: {
    // 下载安装包
    appUpDate () {
      // chcp.fetchUpdate(this.fetchUpdateCallback);
    },
    // 下载返回数据
    fetchUpdateCallback (error, data) {
      setTimeout(() => {
        this.isFilter = true; // 显示背景
        this.upDateBox = true; //显示弹框
      }, 2000);
      if (error) {
        this.upDateTitle = "没有版本更新";
        setTimeout(() => {
          this.isFilter = false; //关闭背景
          this.upDateBox = false; //关闭弹框
        }, 2000);
        console.log(error.description);
        return;
      }
      if (data) {
        this.isFilter = true; // 显示背景
        this.upDateBox = true; //显示弹框
        this.upDataInstallStyle = true; //显示安装样式
        this.upDateTitle = "下载完成 请进行安装";
        this.upDataInstallStyle = "install"; //显示安装按钮
      } else {
        this.isFilter = false; //关闭背景
        this.upDateBox = false; //关闭弹框
      }
    },
    // 检查有更新点击安装
    updateStart () {
      this.upDateTitle = "正在安装 ...";
      setTimeout(() => {
        chcp.installUpdate(this.installationCallback);
        this.upDataInstallStyle = "";
      }, 1000);
    },
    // 安装过程
    installationCallback (error) {
      if (error) {
        console.log(
          "Failed to install the update with error code: " + error.code
        );
        console.log(error.description);
      } else {
        setTimeout(() => {
          this.upDateTitle = "安装完成 " + "请登录";
          this.upDataInstallStyle = "Ok";
          this.upDataStyle = true;
          console.log("Update installed!");
        }, 1000);
      }
    },
    // 安装完成
    updateOk () {
      this.isFilter = false;
      this.upDateBox = false;
    }
  }
};
setFontSize()
window.onresize = function () {
  setFontSize()
};
function setFontSize () {
  var html = document.getElementsByTagName("html")[0]; //获取html元素
  var w = document.documentElement.clientWidth || document.body.clientWidth; //屏幕宽度（兼容处理）
  var nub = (JSON.parse(localStorage.getItem("fontSizeData")) == null ? 100 : JSON.parse(localStorage.getItem("fontSizeData")).fontSizeNub)
  html.style.fontSize = (w * nub) / 370 + "px"; //370为设计稿宽度
}
</script>

<style lang="less">
@import "~vux/src/styles/reset.less";
* {
  touch-action: none;
}

html,
body {
  background-color: #fbf9fe;
  position: absolute;
  top: 0rem;
  left: 0rem;
  bottom: 0rem;
  right: 0rem;
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.Filter {
  filter: blur(12px);
  background: rgba(0, 0, 0, 0.08);
}
#app {
  position: absolute;
  top: 0rem;
  left: 0rem;
  bottom: 0rem;
  right: 0rem;
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cache_popout {
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed !important; /* 浮动对话框 */
  position: absolute;
  top: 0%;
  left: 0%;
  display: block;
  .cache_popout_info {
    border-radius: 0.05rem;
    height: 1.4rem;
    width: 2.7rem;
    position: fixed !important; /* 浮动对话框 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    border-radius: 0.05rem;
    font-size: 0.17rem;
    line-height: 0.2rem;
    color: #414244;
    letter-spacing: 0;
    background: rgba(248, 248, 248, 1);
    border-radius: 0.14rem;
    overflow: hidden;
    span {
      font-family: Semibold;
      display: block;
      font-weight: 700;
      margin-top: 0.19rem;
      font-size: 0.17rem;
      color: #000000;
      letter-spacing: -0.41px;
      text-align: center;
      line-height: 0.22rem;
    }
    p {
      display: block;
      font-size: 0.13rem;
      color: #000000;
      letter-spacing: -0.08px;
      text-align: center;
      line-height: 0.18rem;
      font-family: Regular;
    }
    .btn::before {
      background: #3f3f3f;
      background: rgba(0, 0, 80, 0.05);
      height: 1px;
      content: "";
      width: 100%;
      display: block;
    }
    .btn {
      font-family: Semibold;
      margin-top: 0.18rem;
      width: 100%;
      height: 0.43rem;
      line-height: 0.43rem;
      background-size: 100% 100%;
      font-size: 0.17rem;
      color: #d62f17;
      letter-spacing: -0.41px;
      text-align: center;
      font-weight: 700;
      i {
        display: block;
        width: 100%;
        height: 0.43rem;
        line-height: 0.43rem;
        padding-top: 0.1rem;
        font-family: Regular;
        font-size: 0.17rem;
        color: #da371c;
        letter-spacing: -0.41px;
        text-align: center;
        line-height: 0.22rem;
        margin-right: -1px;
        display: block;
      }
      .unable {
        color: #969696;
      }
    }
  }
}
</style>
